<template>
  <div>
    <div style="background: #fff">
      <div class="org-detail-list">
        <Row>
          <Col class="detail-list-img" span="8">
            <img v-if="detail.handcover === null" src="./../../../assets/images/avatar1.jpg" alt="">
            <img v-else :src="detail.handcover" alt="">
          </Col>
          <Col class="detail-list-text" span="16">
            <p class="detail-name">{{detail.courseName}}</p>
            <p class="detail-text">课程讲师：<span>{{detail.teacherName}}</span></p>
            <p class="detail-text">课程机构：<span>{{detail.orgName}}</span></p>
            <p class="detail-text">课程价格：<span class="detail-text-price">￥{{detail.price}}</span></p>
            <p class="detail-text">课程分类：<span>{{detail.labelNames}}</span></p>
            <Button class="detail-submit" @click="StartLearning" type="warning">开始学习</Button>
          </Col>
        </Row>
      </div>
    </div>
    <div class="detail-list" v-if="liveType === '2'">
      <div  v-if="!detail.chaptersListVOS.length" class="chapter-item">
        <p style="text-align: center;font-size: 20px">暂无章节</p>
      </div>
      <Card style="width: 100%;min-height: 220px;margin-top: 15px;" v-for="(item, index) in detail.chaptersListVOS" :key="index">
        <div class="chapter">
          <div class="chapter-title">{{index + 1}}.{{item.chapterName}}</div>
          <div  v-if="!item.genseesList.length" class="chapter-item">
            <span>暂无章节</span>
          </div>
          <a @click="StartLearning" v-for="(items, indexs) in item.genseesList">
            <div class="chapter-item">
              <Icon type="md-arrow-dropright-circle" style="font-size: 28px;"/>
              <span>{{index + 1}}.{{indexs + 1}} {{items.genseeTitle}}</span>
              <span style="float: right">
                <Icon type="md-checkmark-circle" />
              </span>
            </div>
          </a>
        </div>
      </Card>
    </div>
    <div class="detail-list" v-if="liveType === '1'">
      <!--<div  v-if="!detail.chaptersListVOS.length" class="chapter-item">-->
        <!--<p style="text-align: center;font-size: 20px">暂无章节</p>-->
      <!--</div>-->
      <!--<Card style="width: 100%;min-height: 220px;margin-top: 15px;" v-for="(item, index) in detail.chaptersListVOS" :key="index">-->
        <!--<div class="chapter">-->
          <!--<div class="chapter-title">{{index + 1}}.{{item.chapterName}}</div>-->
          <!--<a :href="items.studentJoinUrl" v-for="(items, indexs) in item.genseesList">-->
            <!--<div class="chapter-item">-->
              <!--<Icon type="md-arrow-dropright-circle" style="font-size: 28px;"/>-->
              <!--<span>{{index + 1}}.{{indexs + 1}} {{items.genseeTitle}}</span>-->
              <!--<span style="float: right">-->
                <!--<Icon type="md-checkmark-circle" />-->
              <!--</span>-->
            <!--</div>-->
          <!--</a>-->
        <!--</div>-->
      <!--</Card>-->
    </div>
    <div class="detail-list" v-if="liveType === '0'">
      <div  v-if="!detail.chaptersListVOS.length" class="chapter-item">
        <span>暂无章节</span>
      </div>
      <Card style="width: 100%;min-height: 220px;margin-top: 15px;" v-for="(item, index) in detail.chaptersListVOS" :key="index">
        <div class="chapter">
          <div class="chapter-title">{{index + 1}}.{{item.chapterName}}</div>
          <div  v-if="!item.videoDemandList.length" class="chapter-item">
            <span>暂无章节</span>
          </div>
          <a @click="StartLearning" v-for="(items, indexs) in item.videoDemandList">
            <div class="chapter-item">
              <Icon type="md-arrow-dropright-circle" style="font-size: 28px;"/>
              <span>{{index + 1}}.{{indexs + 1}} {{items.videoName}}</span>
              <span style="float: right">
                <Icon type="md-checkmark-circle" />
              </span>
            </div>
          </a>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
  import LoginForm from '@/components/login-form'
  export default {
    name: 'course-detail',
    components: {
      LoginForm
    },
    data() {
      return {
        liveType: '',
        detail: {}
      }
    },
    mounted() {
      this.searchDetail()
    },
    methods: {
      searchDetail() {
        let id = this.$route.query.id
        this.liveType = this.$route.query.liveType
        if (this.liveType === '0') {
          this.$get('/api/api/student/luCourse/detail', {courseId: id}).then((res) => {
            if (res.code === 0) {
              this.detail = res.data
            }
          })
        } else if (this.liveType === '1') {
          this.$get('/api/api/student/liveCourse/detail', {courseId: id}).then((res) => {
            if (res.code === 0) {
              this.detail = res.data
            }
          })
        } else {
          this.$get('/api/api/student/course/detail', {courseId: id}).then((res) => {
            if (res.code === 0) {
              this.detail = res.data
            }
          })
        }
      },
      StartLearning() {
        let token = localStorage.getItem('x-token')
        if (!token) {
          this.loginModal = true
        }
        this.findCourse()
      },
      findCourse() {
        let consureId = this.detail.id
        this.$get('/api/order/findCourse', {courseId: consureId}).then((res) => {
          if (res.code === 0) {
            if (res.data === '0') {
              this.$Modal.confirm({
                title: '尚未购买此课程',
                okText: '去购买',
                cancelText: '取消',
                onOk: () => {
                  this.$router.push({path: '/index/order-confirm', query: {courseId: consureId}})
                }
              })
            } else {
              this.$router.push('/index/ucenter/myClass')
            }
          }
        })
      }
    }
  }
</script>

<style scoped>
  .org-detail-list{
    width: 1200px;
    margin: 0 auto;
  }
  .detail-list{
    width: 1000px;
    margin: 0 auto;
  }
  .detail-list-img{
    height: 300px;
  }
  .detail-list-img img{
    margin: 20px;
    width: 340px;
    height: 240px
  }
  .detail-list-text{
    margin: 20px 0;
  }
  .detail-name{
    font-size: 24px;
    line-height: 40px;
  }
  .detail-text{
    font-size: 16px;
    line-height: 30px;
  }
  .detail-text-price{
    font-weight: 600;
    color: #ed4014;
  }
  .detail-submit{
    padding: 10px 40px;
    margin-top: 30px;
  }
  .logo-con img{
    max-height: 64px;
    width: 100%;
  }
  .chapter-item {
    margin-top: 15px;
    height: 50px;
    width: 100%;
    line-height: 50px;
    padding: 0 8px;
  }
  .chapter a :hover {
    height: 50px;
    line-height: 50px;
    padding: 0 8px;
    color: #db2516;
    background: #fffcc8;
    border-radius: 5px;
  }
</style>
